<template>
	<view class="page_content">
		<canvas canvas-id="poster" style="width: 92vw; height: 80vh;">
			<view class="code" id="container">
				<view class="logoM">
					<view v-for="(item, index) in logos" :key="index" class="logo">
						<image :src="urlDomain + item.url"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="qr">
					<view class="title">扫码付款</view>
					<view class="tips">扫码成功后尊享日夜购公排回馈</view>
					<view class="qrcode">
						<view style="width: 160px; height: 154px;">
							<canvas canvas-id="qrcode" style="width: 150px; margin: 10rpx auto;"></canvas>
						</view>
					</view>
				</view>
				<view class="use">
					<image :src="urlDomain+'crmebimage/presets/logo_big.png'"></image>
					<view>助力实体 | 回馈消费</view>
					<view>
						<view class="iconfont icon-tel"></view>
						<view>400 888 2314</view>
					</view>
				</view>
			</view>
		</canvas>	
		<view class="downLoad">
			<image :src="urlDomain+'crmebimage/presets/download.png'" @click="canvasToImage.generateImage"></image>
			<view>点击下载收款码</view>
		</view>
		
		<view v-if="posterShow">
			<view class="staorder-overlay" @click="posterShow=false"></view>
			<image :src="posterImg" class="posterImg"></image>
		</view>
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import UQrcode from '@/utils/uqrcode.js';
	export default {
		name: 'canvasToImage',
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				shopInfo: JSON.parse(this.$Cache.get('shopInfo')),
				logos: [
					{name: '微信支付', url: 'crmebimage/presets/wxpay.png'},
					{name: '支付宝支付', url: 'crmebimage/presets/Alipay.png'},
					{name: '云闪付', url: 'crmebimage/presets/yunsf.png'},
					{name: '花呗', url: 'crmebimage/presets/huabei.png'},
				],
				posterShow: false,
				posterImg: ''
			}
		},
		onShow() {
			this.createQrCode();
		},
		methods: {
			createQrCode() {
				UQrcode.make({
					canvasId: 'qrcode',   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: 'https://www.gzriyegou.com/pay/wxPayNew.html?martId='+this.shopInfo.id,  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 150,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {}
				});
			},
			// 保存图片
			getSaveImg(data) {
				uni.showLoading({
					mask: true
				})
				let base64data = data.base64data;
				// console.log("base64data", base64data)
				// return 
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, function() {
					console.log("加载Base64图片数据成功");
					let time = Date.now()
					let url = '_downloads/yflPic' + time + '.png';
					uni.hideLoading()
					bitmap.save(url, {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						// 保存图片到相册
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								// 图片保存成功后，将临时保存的图片删除
								plus.io.resolveLocalFileSystemURL(
									url,
									function(entry) {
										entry.getMetadata(function(metadata) {
											// console.log("fileCount=" + metadata.fileCount);
											entry
												.remove(); //删除单个文件 _downloads/改文件名
 
										});
									},
									function(error) {
										// uni.showToast({ title: "下载文件" });
										console.log("error" + error);
									}
								);
								bitmap.clear()
							}
						});
						bitmap.clear();
					}, function(e) {
						onsole.log('保存图片失败：' + JSON.stringify(e));
						bitmap.clear();
					});
				}, function() {
					console.log('加载Base64图片数据失败：' + JSON.stringify(e));
					bitmap.clear();
				});
			},
			 // 分享图片
			getSaveImg_Share(data) {
				uni.showLoading({
					mask: true
				})
				let base64data = data.base64data;
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, function() {
					console.log("加载Base64图片数据成功");
					let time = Date.now()
					let url = '_downloads/yflPic' + time + '.png';
					uni.hideLoading()
					bitmap.save(url, {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						// 转发图片到微信
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 2,
							imageUrl: url,
							success: function(res) {
								console.log("success:" + JSON
									.stringify(res));
								bitmap.clear();
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(
									err));
							}
						});
 
					}, function(e) {
						onsole.log('保存图片失败：' + JSON.stringify(e));
						bitmap.clear();
					});
				}, function() {
					console.log('加载Base64图片数据失败：' + JSON.stringify(e));
					bitmap.clear();
				});
			},
			
		}
	}
</script>

<script module="canvasToImage" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			// 获取设备的Dpr值
			getDpr() {
				if (window.devicePixelRatio && window.devicePixelRatio > 1) {
					return window.devicePixelRatio;
				}
				return 1;
			},
			/**
			 * 将传入值转为整数
			 * @param value
			 * @returns {number}
			 */
			parseValue(value) {
				return parseInt(value, 10);
			},
 
            // 截图后保存到本地
			generateImage(event, ownerInstance) {
				// 获取想要转换的dom节点
				var dom = document.getElementById('container');
				html2canvas(dom, {
					// allowTaint: false,
					width: dom.clientWidth,
					height: dom.clientHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true
				}).then(function(canv) {
					// 将canvas转换成图片渲染到页面上
					let url = canv.toDataURL('image/jpg'); // base64数据
					ownerInstance.callMethod('getSaveImg', {
						base64data: url
					})
				});
			},
 
            // 截图后分享给好友
			generateImage_Share(event, ownerInstance) {
				// 获取想要转换的dom节点
				var dom = document.getElementById('container');
				html2canvas(dom, {
					// allowTaint: false,
					width: window.clientWidth,
					height: window.clientHeight,
					useCORS: true,
					dpi: 350
				}).then(function(canv) {
					// 将canvas转换成图片渲染到页面上
					let url = canv.toDataURL('image/jpg'); // base64数据
					ownerInstance.callMethod('getSaveImg_Share', {
						base64data: url,
					})
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	.page_content{
		height: 100vh;
		background-color: #F8FBFF;
		padding: 22rpx 32rpx 0 32rpx;
	}
	.code{
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 32rpx 0;
		
		.logoM {
			display: flex;
			justify-content: center;
			
			.logo{
				flex: 1;
				text-align: center;
				align-items: center;
				
				image{
					width: 76rpx;
					height: 64rpx;
				}
			}
		}
		
		.qr{
			background-color: #4484FF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			align-items: center;
			padding: 40rpx 0 ;
			margin-top: 30rpx;
			
			.title{
				font-size: 44rpx;
				color: #fff;
				font-weight: 500;
			}
			
			.tips{
				font-size: 24rpx;
				color: #fff;
				font-weight: 400;
			}
			
			.qrcode{
				background-color: #fff;
				border-radius: 40rpx;
				margin-top: 20rpx;
			}
		}
		
		.use{
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			align-items: center;
			color: #8C9BA5;
			margin-top: 20rpx;
			
			image{
				width: 200rpx;
				height: 112rpx;
			}
		}
	}
	
	.downLoad{
		margin-top: 70rpx;
		font-size: 24rpx;
		color: #6F7C85;
		text-align: center;
		
		image{
			width: 88rpx;
			height: 88rpx;
		}
	}
	
	.staorder-overlay{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 13;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.4;
	}
	
	.posterImg {
		z-index: 99 !important;
		background: #fff !important;
		opacity: 1 !important;
		position: fixed;
		top: 0;
		width: 92vw;
	}
	
</style>
